<template>
  <div>
    <v-title></v-title>

    <ul>
      <!-- 1.路由导航   query传参 不要去改路由的路径  /路径? -->
      <!-- <li v-for="item in sortList" :key="item.id">
         <router-link :to="'/list?id='+item.id">{{ item.name }}</router-link>
      </li> -->

      <!-- 2.编程式导航  -->
      <li v-for="item in sortList" :key="item.id" @click="goList(item.id)">
         {{ item.name }}
      </li>
    </ul>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      sortList: [
        {
          id: 1,
          name: "手机"
        },
        {
          id: 2,
          name: "电脑"
        },
        {
          id: 3,
          name: "对象"
        },
        {
          id: 4,
          name: "9.9对象包邮"
        },
        {
          id: 5,
          name: "买个房"
        }
      ]
    };
  },
  methods:{
    goList(id){
      //编程式导航传递方式一
      // this.$router.push("/list?id="+id);

      // 编程式导航传递方式二
      this.$router.push({
         path:"/list",
         query:{
            id,
            a:1
         }
      });
    }
  }
};
</script>
  
  <style scoped>
  li,a{
   display: block;
   border: 1px solid orange;
   margin: 20px;
   text-align: center;
   font:.2rem/.8rem "微软雅黑"
   
  }

</style>